layui.use(['table', 'element', 'form', 'layer', 'laydate'], function () {
    var element = layui.element;
    var table = layui.table;
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var laydate = layui.laydate;


    table.render({
        elem: '#0-table'
        , url: '/vocation/getVocation'
        , height: 512
        , where: {
            status: '审核中',
            me: 0
        }
        , id: "vocation-0"
        , page: true
        , limit: 10
        , cols: [[
            {field: 'emp', title: '员工编号'}
            , {field: 'empName', title: '员工'}
            , {field: 'startDay', title: '开始日期', width: 190}
            , {field: 'endDay', title: '结束日期'}
            // ,{field:'area',title:'区域'}
            // ,{field:'nativePlace',title:'籍贯'}
            // ,{field:'state',title:'状态'}
            , {field: 'reason', title: '原因'}
            , {field: 'status', title: '状态'}
            , {field: 'operation', title: '操作', fixed: 'right', width: 180, align: 'center', toolbar: '#barDemo'}
        ]]
    });

    table.render({
        elem: '#4-table'
        , url: '/vocation/getVocation'
        , where: {
            status: '审核中',
            me: 1
        }
        , id: "vocation-4"
        , page: true
        , limit: 10
        , cols: [[
            {field: 'emp', title: '员工编号'}
            , {field: 'empName', title: '员工'}
            , {field: 'startDay', title: '开始日期', width: 190}
            , {field: 'endDay', title: '结束日期'}
            // ,{field:'area',title:'区域'}
            // ,{field:'nativePlace',title:'籍贯'}
            // ,{field:'state',title:'状态'}
            , {field: 'reason', title: '原因'}
            , {field: 'status', title: '状态'}
            // , {field: 'operation', title: '操作', fixed: 'right', width: 120, align: 'center', toolbar: '#barDemo'}
        ]]
    });


    table.render({
        elem: '#1-table'
        , url: '/vocation/getVocation'
        , where: {
            status: '已处理',
            me: 0
        }
        , id: "vocation-1"
        , page: true
        // , limit: 10
        , cols: [[
            {field: 'emp', title: '员工编号'}
            , {field: 'empName', title: '员工'}
            , {field: 'startDay', title: '开始日期', width: 190}
            , {field: 'endDay', title: '结束日期'}
            // ,{field:'area',title:'区域'}
            // ,{field:'nativePlace',title:'籍贯'}
            // ,{field:'state',title:'状态'}
            , {field: 'reason', title: '原因'}
            , {field: 'status', title: '状态'}
            // , {field: 'operation', title: '操作', fixed: 'right', width: 120, align: 'center', toolbar: '#barDemo'}
        ]]
    });


    laydate.render({
        elem: '#startDay', min: 0
    });


    laydate.render({
        elem: '#endDay', min: 0
    });


    var newVocation = $('#newVocation');
    var vocationForm = $('#newVocationForm');
    vocationForm.hide();
    newVocation.click(function () {

        layer.open({
            title: "休假申请",
            type: 1,
            area: 'auto',
            maxWidth: 1000,
            content: $("#newVocationForm")
        });
        vocationForm.show();
        return false;
    });


    form.on('submit(newVocationSubmit)', function (data) {
        $.post('/vocation/newVocation', data.field, function (data) {
            if (!data.status) {
                layer.open({title: '警告', content: data.msg});
            } else {
                vocationForm[0].reset();
                layer.close(layer.index);
                layer.open({
                    title: '成功',
                    content: "申请休假成功！"
                });
                table.reload('vocation-0');
                table.reload('vocation-4');
            }
        });
        return false;
    });


    table.on('tool(vocation-0)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        console.log(data);
        if (layEvent === 'agree') {
            layer.confirm('确认批准吗？', {icon: 3, title: '确认'}, function (index) {
                agreeVocation(data.id);
                layer.close(index);
            })

        } else if (layEvent === 'refuse') {

            layer.confirm('确认否决吗？', {icon: 3, title: '确认'}, function (index) {
                refuseVocation(data.id);
                layer.close(index);
            })

        } else if (layEvent === 'del') {
            layer.confirm('确认撤销吗？', {icon: 3, title: '确认'}, function (index) {
                deleteVocation(data.id);
                layer.close(index);
            })
        }
    });


    function agreeVocation(id) {
        $.post('/vocation/agreeVocation', {id: id}, function (data) {
            if (!data.status) {
                layer.open({title: '警告', content: data.msg});
            } else {
                layer.open({title: '成功', content: '已批准'});
                table.reload('vocation-0');
                table.reload('vocation-4');
                table.reload('vocation-1');
            }
        });
    }

    function refuseVocation(id) {
        $.post('/vocation/refuseVocation', {id: id}, function (data) {
            if (!data.status) {
                layer.open({title: '警告', content: data.msg});
            } else {
                layer.open({title: '成功', content: '已拒绝'});
                table.reload('vocation-0');
                table.reload('vocation-4');
                table.reload('vocation-1');
            }
        });
    }

    function deleteVocation(id) {
        $.post('/vocation/deleteVocation', {id: id}, function (data) {
            if (!data.status) {
                layer.open({title: '警告', content: data.msg});
            } else {
                layer.open({title: '成功', content: '已撤销'});
                table.reload('vocation-0');
                table.reload('vocation-4');
                table.reload('vocation-1');
            }
        });
    }


});